<template>
  <div class="container">
    <div class="el-card-div">
      <el-card v-loading="isLoading">
        <div class="el-row">
          <el-row type="flex" align="middle">
            <el-col :span="6">
              <el-form label-width="80px">
                <el-form-item label="关键字">
                  <el-input
                    placeholder="根据编号搜索"
                    v-model="keyWord"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6" :offset="12">
              <div class="el-col-button">
                <el-button
                  type="primary"
                  plain
                  size="small"
                  @click="clearKeyWord"
                  >清除</el-button
                >
                <el-button type="primary" size="small" @click="screenKeyWord()"
                  >搜索</el-button
                >
              </div>
            </el-col>
          </el-row>
        </div>
        <el-alert
          :title="'数据一共' + counts + '条'"
          type="info"
          show-icon
          :closable="false"
          class="el-alert"
        >
        </el-alert>
        <el-table :data="randomsList" style="width: 100%">
          <el-table-column prop="id" label="编号" width="240px">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            :formatter="getQuestionTypeText"
          >
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="240px">
            <template #default="{ row }">
              <div v-for="(item, index) in row.questionIDs" :key="index">
                <span class="showQuestion" @click="showQuestion(item.id)">
                  {{item.number}}</span>
                <!-- <span class="showQuestion" @click="showQuestion">
                  {{ item.number }}</span -->
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="录入人"
            width="200px"
          ></el-table-column>
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="delRandoms(scope.row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="height: 60px; margin-top: 10px" class="el-pagination">
          <el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="randomsPagesize"
            :current-page="randomsPage"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- <randoms-preview
      :showDialog="this.showDialog"
      @close="close"
    ></randoms-preview> -->
    <randoms-preview
      :showDialog="this.showDialog"
      @close="close"
      :previewItem="previewItem"
      :enumPreviewItem="enumPreviewItem"
    ></randoms-preview>
  </div>
</template>

<script>
// 引入组题列表,引入组题列表删除，引入基础题库详情
import { randoms, removeRandoms, questionsDetailApi } from '../../api/hmmm/questions'
// import { randoms, removeRandoms } from '../../api/hmmm/questions'
// 引入枚举
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
// 引入预览组件
import randomsPreview from '../components/randoms-preview.vue'
export default {
  components: { randomsPreview },
  data () {
    return {
      randomsList: [], // 请求列表
      randomsPage: 1, // 当前页
      randomsPagesize: 20, // 每页多少条
      counts: 0, // 数据总条数
      keyWord: '', // 关键字
      questionType, // 题型枚举
      difficulty, // 难度枚举
      direction, // 方向枚举
      showDialog: false, // dialog显示隐藏
      previewItem: {}, // dialog 请求数据
      previewItemVirtual: { // 假数据
        questionType: '单选',
        id: 34,
        difficulty: '困难',
        tags: '青玉案',
        subjectName: '前端',
        directoryName: 'Vue',
        direction: '企业服务',
        question: '<p>关于Vuex说法错误的是？<p>',
        options: [
          { code: 'D', id: 148, img: '', isRight: 0, questionsID: 33, title: 'Vuex可以用来管理数据' },
          { code: 'C', id: 147, img: '', isRight: 0, questionsID: 33, title: 'Vuex也可以实现组件间的传值' },
          { code: 'B', id: 146, img: '', isRight: 1, questionsID: 33, title: 'Vuex的属性有state、mutations、actions、setters等' },
          { code: 'A', id: 145, img: '', isRight: 0, questionsID: 33, title: 'mutation中的方法按照规定最好不要涉及异步方法' }
        ],
        videoURL: 'http://vfx.mtime.cn/Video/2021/07/10/mp4/210710122716702150.mp4',
        answer: '<p>Vuex的属性有state、mutations、actions、getters、module等<p>',
        remarks: '没有备注'
      },
      // 子组件数据
      enumPreviewItem: {
        // 子组件需要枚举转换的数据
        questionType: '',
        difficulty: '',
        direction: ''
      },
      isLoading: false // 加载中
    }
  },
  created () {
    this.getRandomsList()
  },
  methods: {
    // 定义枚举的方法
    enumerateFn (val, cellValue) {
      return val.find((item) => item.value === +cellValue)?.label || '未知'
    },
    // 获取数据列表
    async getRandomsList () {
      const { data } = await randoms({
        page: this.randomsPage,
        pagesize: this.randomsPagesize
      })
      // console.log(data)
      this.randomsList = data.items
      this.counts = data.counts
    },
    // 利用枚举转换试题类型
    getQuestionTypeText (row, column, cellValue, index) {
      return this.enumerateFn(this.questionType, cellValue)
    },
    // 改变每页条数
    handleSizeChange (val) {
      this.randomsPagesize = val
      this.randomsPage = 1
      this.getRandomsList()
    },
    //  改变第几页
    handleCurrentChange (val) {
      this.randomsPage = val
      this.getRandomsList()
    },
    // 清除关键字
    clearKeyWord () {
      this.keyWord = ''
      this.getRandomsList()
    },
    // 关键字筛选
    async screenKeyWord () {
      const { data } = await randoms({ keyword: this.keyWord })
      this.randomsList = data.items
      this.counts = data.counts
    },
    // 删除组题
    delRandoms (data) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms(data)
          this.getRandomsList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    // 预览试题
    async showQuestion (id) {
      try {
        const { data } = await questionsDetailApi({ id })
        this.previewItem = data
        this.showDialog = true
        this.enumPreviewItem.questionType = this.enumerateFn(
          this.questionType,
          data.questionType
        )
        this.enumPreviewItem.difficulty = this.enumerateFn(
          this.difficulty,
          data.difficulty
        )
        this.enumPreviewItem.direction = this.enumerateFn(
          this.direction,
          data.direction
        )
      } catch (error) {
        console.log(error)
        this.showDialog = true
        // 获取数据失败赋值假数据
        this.previewItem = this.previewItemVirtual
      }
    },
    close () {
      this.showDialog = false
    }
  }
}
</script>

<style scoped lang='scss'>
.el-card-div {
  padding: 10px;
}
.el-col-button {
  float: right;
}
.el-alert {
  margin: 10px 0;
}
.el-pagination {
  float: right;
}
.showQuestion {
  color: #0099ff;
  cursor: pointer;
}
</style>
